import React, { Component } from 'react'
import qs from 'querystring'

/*
  querystring 这个库 是专门帮我们处理  urlencodeed 编码 的库
    urlencodeed编码： 多组key和value通过&连在一起

  例子：
    let a ='a=1&b=2'

    qs.parse(a) ==== {a:1,b:2}

    let obj = {name:'Jimmy',age:22}
    qs.stringify(obj) // ' name=Jimmy&age:22 '

    用起来其实和 JSON 的方法是一样的
*/ 


/*
  在react中 使用 query/search 传参没有像Vue.js那样方便一点 会相对更加的麻烦一点点
*/ 

export default class Detail extends Component {

  state = {
    Detail:[
      {id:1,detail:'我爱你，中国'},
      {id:2,detail:'我爱你，母亲'},
      {id:3,detail:'我爱你，雪雪'},
    ]
  }

  render() {
    console.log('详情组件接收到的参数',this.props)
    const params = this.props.location.state||{}
    // 因为时使用state传参 当用户清空缓存的时候数据就会丢 所以要做好当没有数据时的错误判断
    // const params = qs.parse(this.props.location.search.slice(1))
    // const params = this.props.match.params
    const detail = this.state.Detail.find(item=>item.id===Number(params.id))||{}
    /*
      当我们只要找一个数据的时候可以直接使用数组的 find 方法 可以不要使用 filter 再取 0
        找一个的时候 find的效率是比filter更高的
    */ 
    // console.log(detail)
    return (
      <div>
        <ul>
          <li>ID:{params.id}</li>
          <li>TITLE:{params.title}</li>
          <li>CONTENT:{detail.detail}</li>
        </ul>
      </div>
    )
  }
}
